<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { delMsg, soldOutMsg } from '@/api/msg'
import { dateFormat } from '@/util/dict'
import type { MsgTable } from '@/types/msg'
import { authXSS } from '@/util/token'
const props = defineProps<{
  tableDict: Map<string, string>
  rows: MsgTable[]
  type: 'del' | 'soldOut'
  refresh: () => void
}>()
const emit = defineEmits<{
  (event: 'cDlg'): void
}>()

function cancel() {
  emit('cDlg')
}

function enter() {
  let ids: number[] = []
  props.rows.forEach((d) => {
    ids.push(d.id!)
  })
  if (props.type == 'del') {
    delMsg(ids)
      .then((d) => {
        props.refresh()
        ElMessage.success(d.msg)
        emit('cDlg')
      })
      .catch((d) => {
        ElMessage.error(d.msg)
      })
  } else if (props.type == 'soldOut') {
    soldOutMsg(ids)
      .then((d) => {
        props.refresh()
        ElMessage.success(d.msg)
        emit('cDlg')
      })
      .catch((d) => {
        ElMessage.error(d.msg)
      })
  }
}
</script>

<template>
  <el-scrollbar height="60vh">
    <el-card shadow="hover" v-for="item in rows">
      <el-descriptions direction="vertical" :title="item.title" :column="2">
        <el-descriptions-item :label="(tableDict.get('send') || 'send') + '：'" :span="1">
          <span class="highlight-info">{{ item.send }}</span>
        </el-descriptions-item>
        <el-descriptions-item :label="(tableDict.get('time') || 'time') + '：'" :span="1">
          <span class="highlight-success">{{ dateFormat(item.time!) }}</span>
        </el-descriptions-item>
        <el-descriptions-item :label="(tableDict.get('msg') || 'msg') + '：'" :span="2">
          <div v-html="authXSS(item.msg!)"></div>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
  </el-scrollbar>

  <div class="buttons">
    <el-button @click="cancel">取消</el-button>
    <el-button type="primary" @click="enter"> 确定 </el-button>
  </div>
</template>

<style scoped lang="less">
.buttons {
  display: flex;
  margin-top: 30px;
  justify-content: flex-end;
}

.el-card {
  margin: 20px 0;
}
</style>
